.entity-selector {
    --padding: var(--modal-padding, 16px);

    $sort-button-size: 32px;
    $sort-button-margin: 8px;

    color: $dark-text;

    // necessary for scrolling
    display: flex;
    flex-direction: column;
    height: 100%;
    > * {
        flex-shrink: 0;
    }

    .scrollable {
        flex: 1 1 auto;
        overflow-y: auto;
        width: 100%;
        position: relative;
    }

    .entity-selector__search-bar {
        padding: 0 var(--padding) 8px var(--padding);
    }

    .entity-selector__sort-bar {
        padding: 0 var(--padding);
        margin-top: 8px;
        margin-bottom: 16px;

        .entity-selector__sort-dropdown-and-button {
            display: flex;
            align-items: center;
        }

        .entity-selector__sort-dropdown {
            flex-grow: 1;

            .control .label svg {
                transform: rotate(-90deg);
            }
        }

        button.sort {
            flex-shrink: 0;
            margin-left: $sort-button-margin;

            display: flex;
            align-items: center;
            justify-content: center;

            position: relative;
            height: $sort-button-size;
            width: $sort-button-size;
            padding: 7px;

            color: $dark-text;
            background: $gray-10;
            border: none;
            border-radius: 4px;

            svg {
                height: 14px;
                width: 14px;
            }

            &:hover:not(:disabled) {
                background: $gray-20;
                cursor: pointer;
            }

            &:active:not(:disabled) {
                color: $blue-90;
                background: $blue-20;
                border: 1px solid $blue-20;
            }

            &:disabled {
                background: $gray-10;
                color: $gray-60;
            }
        }
    }

    .entity-selector__sort-dropdown-menu {
        // Make the sort dropdown menu span the full width of the sort bar.
        width: calc(
            var(--trigger-width) + $sort-button-margin + $sort-button-size
        );
    }

    .entity-selector__filter-bar {
        margin-top: 16px;
        margin-bottom: 8px;
    }

    .entity-selector__content {
        $row-border: 1px solid $gray-10;

        margin: 0 var(--padding) 8px var(--padding);

        .entity-section + .entity-section {
            margin-top: 16px;
        }

        .entity-section__header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            button {
                background: none;
                border: none;
                color: $dark-text;
                font-size: 13px;
                font-weight: 500;
                letter-spacing: 0.01em;
                text-decoration-line: underline;
                text-underline-offset: 3px;
                cursor: pointer;
                margin-bottom: 8px;

                &:hover {
                    text-decoration: none;
                }

                &:active {
                    background: $gray-5;
                }

                &:disabled {
                    color: $gray-50;
                    text-decoration: none;
                    cursor: default;
                }
            }
        }

        .entity-section__title {
            letter-spacing: 0.01em;
            margin-bottom: 8px;
        }

        .entity-search-results {
            margin-top: 8px;
        }

        .selectable-entity {
            display: flex;
            justify-content: space-between;

            .checkbox,
            .radio {
                width: 100%;
            }

            label {
                display: block;
                padding: 9px 8px 9px 16px;
                cursor: pointer;
            }

            .custom,
            .outer {
                left: 16px;
                top: 9px;
            }

            &:hover {
                background: rgba(219, 229, 240, 0.4);
            }

            &--muted {
                opacity: 0.4;
            }

            &--with-bar:hover {
                background: rgba(219, 229, 240, 0.6);
            }

            .value {
                color: $gray-60;
                white-space: nowrap;
                margin-left: 12px;
                padding-top: 9px;
                padding-right: 8px;
            }

            .bar {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                background: $blue-10;
                z-index: -1;
            }

            .label-with-location-icon {
                &--no-line-break {
                    white-space: nowrap;
                }

                svg {
                    margin-left: 6px;
                    font-size: 0.9em;
                    color: $gray-60;

                    // hide focus outline when clicked
                    &:focus:not(:focus-visible) {
                        outline: none;
                    }
                }
            }
        }

        li {
            position: relative;
            z-index: 0;
            background: #fff;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        // add borders in between elements
        li + li .selectable-entity {
            border-top: $row-border;
        }

        // add a top border to the first element
        li:first-of-type .selectable-entity {
            border-top: $row-border;
        }

        // add a bottom border to the last element
        li:last-of-type .selectable-entity {
            border-bottom: $row-border;
        }

        // make an exception for the top border if requested
        .hide-top-border li:first-of-type .selectable-entity {
            border-top: none;
        }
    }
}
